<template>
  <div>
    <NavBar :title="title" />
    <div class="content">
      <!--轮播-->
      <van-swipe :autoplay="3000" lazy-render class="my-swipe">
        <van-swipe-item v-for="image in images" :key="image">
          <img :src="image.pic" />
        </van-swipe-item>
      </van-swipe>
      <!--轮播-->
      <!--产品名-->
      <div class="product">
        <div class="word">
          <h1>{{ itemId.name }}</h1>
          <p>{{ itemId.name }}</p>
          <p>
            <span>指导价：</span>
            <span class="proLef">{{ itemId.minPrice }}</span>
            <span class="fh">~</span>
            <span class="proLef">{{ itemId.originalPrice }}</span>
          </p>
          <p class="sales1"><van-icon class-prefix="icon" name="dingdan" size="25PX" /> <i>{{ itemId.categoryId }}</i>
          </p>
        </div>
        <div class="item-content" v-html="itemContent"></div>
      </div>
      <!--介绍-->
      <!--行动栏-->
      <van-action-bar>
        <van-action-bar-icon icon-prefix="icon" icon="shouye1" text="首页" to="/" />
        <van-action-bar-icon icon-prefix="icon" icon="gouwuche1" text="购物车" to="/cart" :badge="num" />
        <van-action-bar-button color="#be99ff" type="warning" text="加入购物车" @click="showSku(0)" />
        <van-action-bar-button color="#7232dd" type="danger" text="立即购买" @click="showSku(1)" />
      </van-action-bar>
    </div>
    <!-- 商品规格弹窗 -->
    <van-popup v-model:show="skuShow" closeable round position="bottom" :style="{ height: '30%' }">
      <div>
        <van-card :num="itemSku.number" :price="itemSku.minPrice" :title="itemSku.name" :thumb="itemSku.pic">
          <template #footer>
            <van-stepper v-model="itemSku.number" />
          </template>
          <template #bottom>
            <van-button size="large" round type="danger" @click="confirmAction(itemSku.number)">确定</van-button>
          </template>
        </van-card>

      </div>
    </van-popup>
    <!-- /商品规格弹窗 -->
  </div>
</template>

<script setup lang="ts">
import NavBar from '@c/NavBar.vue'
import { ref, onMounted } from 'vue'
import { fetchdetail, addCart } from '@a/index'
import { useRoute } from 'vue-router'
import { showToast } from 'vant'
const title = ref<string>('详情页')
const route = useRoute()
const num = localStorage.getItem('num')
//根据商品id获取商品详情
let itemSku = ref<any>({})
let itemId = ref<any>({}) //basicInfo
const itemContent = ref<string>('')
let images = ref<any[]>([]) //pics
let getItem = () => {
  fetchdetail({
    id: route.query.id
  }).then(res => {
    if (res.data.code === 0) {
      console.log(res);
      const { basicInfo, content, pics } = res.data.data
      itemId.value = basicInfo,
        itemContent.value = content,
        images.value = pics
      title.value = basicInfo.name
      // 商品规格
      itemSku.value = {
        ...basicInfo,
        number: 1
      }
    }
  })
}
// 控制商品规格弹窗
const skuShow = ref<boolean>(false)
let clickAction: number = 0 // 0 去购物车 1 去确认订单
const showSku = (action: number) => {
  skuShow.value = true
  clickAction = action
}
// 点击商品规格确定按钮 
const confirmAction = (number: number) => {
  if (clickAction === 0) {
    addCart({
      goodsId: route.query.id,
      number
    }).then(res => {
      console.log(res);
      if (res.data.code === 0) {
        // 加入购物车成功
        showToast({
          message: '加入购物车成功',
          duration: 500,
          onClose() {
            skuShow.value = false
          }
        })

      }
    })
  } else {
    alert('去确认订单')
  }
}

onMounted(() => {
  getItem()
})
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;

  .my-swipe {
    width: 10rem;
    height: 5rem;
    margin-top: 50px;

    img {
      width: 10rem;
      height: 6rem;
    }
  }

  .product {
    /* background-color: aqua; */
    border-radius: 20px 20px 0 0;
    position: relative;
    /* flex: 1; */
    min-height: 380px;
    box-shadow: 1px 1px 50px 1px #999;

    .word {
      padding: 20px;

      h1 {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      p {
        margin-top: 10px;

        .proLef {
          color: #f60;
          font-size: 18PX;
          margin: 0 10PX;
          font-weight: 900;
        }

        .fh {
          font-weight: 900;
        }
      }

    }

    .sales1 {
      position: absolute;
      top: 115px;
      left: 270px
    }
  }

  :deep .item-content {
    margin-top: 30px;

    img {
      width: 100%;
    }

    p {
      text-align: center;
    }
  }
}

.van-card {
  position: relative;

  :deep(.van-button) {
    position: absolute;
    bottom: -95PX;
    left: -47PX;

  }
}
</style>